<template>
  <div class =app-container>
    <div class="header">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="订单ID">
          <el-input v-model="query.id" placeholder="请输入ID" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="find">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="write">填写订单信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="orderID"
        label="订单ID"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="orderName"
        label="订单名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="wareName"
        label="商品名称"
        >
      </el-table-column>
      <el-table-column
        prop="wareCount"
        label="数量"
        >
      </el-table-column>
      <el-table-column
        prop="warehouse"
        label="进货仓"
        width="180">
      </el-table-column>
      <el-table-column
        prop="isExamine"
        label="审批状态"
      >
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="primary"
                     @click="update">编辑
          </el-button>
          <el-button size="mini" type="danger"
                     @click="del">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="添加订单信息"
      :visible.sync="dialogVisible"
    >

      <el-form inline label-width="120" ref="form" size="small">
        <el-form-item prop="orderID" label="订单ID">
          <el-input type="text" v-model="order.orderID" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="orderName" label="订单名称">
          <el-input type="text" v-model="order.orderName" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="wareName" label="商品名称">
          <el-input type="text" v-model="order.wareName" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="wareCount" label="数量">
          <el-input-number v-model="order.wareCount" clearable ></el-input-number>
        </el-form-item>
        <el-form-item prop="warehouse" label="进货仓">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
<!--          <el-input type="text" clearable ></el-input>-->
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改订单信息"
      :visible.sync="dialogVisible11"
    >

      <el-form inline label-width="120" ref="form" size="small">
        <el-form-item prop="orderID" label="订单ID">
          <el-input type="text" v-model="order.orderID" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="orderName" label="订单名称">
          <el-input type="text" v-model="order.orderName" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="wareName" label="商品名称">
          <el-input type="text" v-model="order.wareName" clearable ></el-input>
        </el-form-item>
        <el-form-item prop="wareCount" label="数量">
          <el-input-number clearable v-model="order.wareCount" ></el-input-number>
        </el-form-item>
        <el-form-item prop="warehouse" label="进货仓">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!--          <el-input type="text" clearable ></el-input>-->
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible11 = false">取 消</el-button>
        <el-button type="primary" @click="submit1">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { orderID : 'CPJC20210411001',
          orderName:'华为手机入库',
          wareName:'手机',
          wareCount:'100',
          warehouse:'电子产品仓库',
          isExamine:'未审批',
        }

      ],
      options:[{
        value:'选项1',
        label:'成品仓库',
      },
        {
          value:'选项2',
          label:'原料仓库',
        },
        {
          value:'选项3',
          label:'酒水仓库',
        },
        {
          value:'选项4',
          label:'电子产品仓库',
        },
        {
          value:'选项5',
          label:'其他仓库',
        }
      ],
      value:'',
      query:{
        id:''
      },
      // private long orderID;  订单ID
      // private String orderName;订单名称
      // private long wareName;  商品名称
      // private long wareCount;  数量
      // warehouse  仓库名称
      // private long isExamine;
      order:{
        orderID:'',
        orderName:'',
        wareName:'',
        wareCount:'',
        warehouse:''
      },
      dialogVisible:false,
      dialogVisible11:false
    }
  },
  methods: {
    find() {

    },
    write() {
      this.dialogVisible = true
    },

    update() {
      this.dialogVisible11 = true
    },
    del() {
      this.$confirm('是否继续删除数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submit(){

    },
    submit1(){

    }
  }
}
</script>
